<template>
  <div>
    <el-row>
      <el-col :span="18">常用套餐</el-col>
      <el-col
        :span="6"
        align="right"
      >
        <el-button
          type="primary"
          @click="visible=true"
        >设置套餐</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <!-- :class="[item.isActive?'activeCarList':'carList']" -->
        <el-tag
          class="elTagcalss"
          type="success"
          v-for="(item,index) in commonPackages"
          :key="item.id"
          @click="shortcutMenu(item.id,index)"
        >
          {{item.carPackageName}}
          <svg-icon
            v-if="item.isActive"
            icon-class="yes"
            class="svgicon"
          />
        </el-tag>
      </el-col>
    </el-row>
    <el-dialog
      v-if="visible"
      :title="dialogTitle"
      :visible.sync="visible"
      :append-to-body="true"
      @close="dialogClose"
    >
      <!-- :width="dialogWidth" -->
      <SelectionPackage
        v-if="dialogTitle == '套餐设置'"
        status="setting"
        :commonPackages="commonPackages"
        @getList="changeListCheck"
      />
    </el-dialog>

  </div>
</template>
<script>
import { SelectionPackage } from '@/components/index' //导入组件库
import { getStoreId, getRefs } from '@/utils/index';
import { carPackageList, getCarPackageById } from '@/api/after-sale/client/package';//项目接口
export default {
  components: {
    SelectionPackage,
  },
  data () {
    return {
      visible: false,
      dialogTitle: '套餐设置',
      commonPackages: [],
      workOrderItemList_ref: '',//workOrderItemList组件
      fittingRef: '',//fitting组件
    }
  },
  methods: {
    changeListCheck () {
      this._carPackageList();
      this.dialogClose();
    },
    dialogClose () {
      this.visible = false;
    },
    _carPackageList () {
      carPackageList({ frequently: true, storeId: getStoreId() }, 1000, 1).then(res => {
        let { success, data: { content } } = res;
        this.commonPackages = content;
      })
    },
    shortcutMenu (id, index) {
      let tf = !this.commonPackages[index].isActive;
      this.$set(this.commonPackages[index], "isActive", tf);
      this._getCarPackageById(id, tf);
    },
    async _getCarPackageById (id, b) {
      if (b) {
        let { success, data: { carProjectList, carPartsList } } = await getCarPackageById(id);
        if (!this.workOrderItemList_ref) {
          this.workOrderItemList_ref = getRefs("workOrderItemList", this.$parent);
        }
        this.workOrderItemList_ref.changeListCheck(carProjectList);
        if (carPartsList) {
          if (!this.fittingRef) {
            this.fittingRef = getRefs("fitting", this.$parent);
          }
          this.fittingRef.changeListCheck(carPartsList);
        }
      }
    },
  },
  created () {
    this._carPackageList();
  }

}
</script>
<style lang="scss" scoped>
.elTagcalss {
  margin-left: 10px;
}
.svgicon {
  color: red;
}
</style>